<template>
  <div class="the-list">
    <div class="panel-search">
      <el-form inline :model="tableData.query" class="demo-form-inline">
        <el-form-item label="优惠券领取人">
          <el-input v-model="tableData.query.getName"></el-input>
        </el-form-item>

        <el-form-item label="领券状态">
          <el-select
            v-model="tableData.query.useStatus"
            placeholder="状态"
            clearable
          >
            <el-option
              v-for="item in tableData.useStatusList"
              :key="item.key"
              :label="item.name"
              :value="item.key"
            />
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="tableFn.onSubmit">搜索</el-button>
          <el-button type="primary" @click="tableFn.onResetQuery"
            >重置</el-button
          >
        </el-form-item>
      </el-form>
    </div>

    <div class="panel-table">
      <div class="table-head">
        <span>优惠券明细列表</span>
      </div>
      <el-table
        :data="tableData.list"
        stripe
        :header-cell-style="{ backgroundColor: '#ededed', padding: '12px 0' }"
        style="width: 100%"
        border
      >
        <el-table-column prop="useStatus" label="领取状态"/>

        <el-table-column prop="getName" label="领取人" />
        <el-table-column prop="getTime" label="领取时间" />
        <el-table-column prop="useTime" label="使用时间">
          <template #default="{ row }">
            {{ !!row.useTime ? row.useTime : "" }}
          </template>
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          width="200px"
          align="center"
        >
          <template #default="{ row }">
            <el-button
              size="small"
              type="success"
              plain
              @click="detailFn.openPanel(row)"
              >详情</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <div class="table-pagination">
        <pagination
          :total="tableData.total"
          v-model:page="tableData.query.page"
          v-model:limit="tableData.query.pageSize"
          @pagination="tableFn.getTableData"
        />
      </div>
    </div>
  </div>
  <el-dialog :title="'优惠券明细详情'" width="30%"  v-model="detailData.showPanel" center>
    <el-form
      ref="formRef"
      :model="detailData.data"
      class="demo-form-inline"
      label-width="140px"
    >
      <el-row>
        <el-form-item prop="useStatus" label="优惠券状态">
          {{ detailData.data.useStatus }}
        </el-form-item>
        </el-row>
        <el-row>
        <el-form-item prop="getName" label="领取人">
          {{ detailData.data.getName }}
        </el-form-item>
      </el-row>
        <el-row>
        <el-form-item prop="getTime" label="领取时间">
          {{ detailData.data.getTime }}
        </el-form-item>
      </el-row>
        <el-row>
        <el-form-item prop="useTime" label="使用时间">
          {{ !!detailData.data.useTime ? detailData.data.useTime : ''  }}
        </el-form-item>
      </el-row>
        <el-row>
        <el-form-item prop="orderNo" label="使用订单编号">
          <span style="font-weight: bold;">{{ detailData.data.orderNo }}</span>
        </el-form-item>
      </el-row>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="detailFn.closePanel()"
          >确 定</el-button
        >
      </span>
    </template>
  </el-dialog>
</template>
  
  
  <script>
import Pagination from "@/components/Pagination";
import { ref, reactive, watchEffect } from "vue";
import { getCouponDetailList } from "@/api/coupon.js";
import { useRouter } from "vue-router";
import { ElMessage } from "element-plus";
import { gotoUserDetail, getItemFromArray } from "@/utils/tool";

export default {
  name: "couponDetailList",
  components: {
    Pagination,
  },
  setup() {
    // 默认数据备份，以便重置或恢复
    const { $data: tableData, $fn: tableFn } = tableModule();
    const { $data: detailData, $fn: detailFn } = detailModule();

    return {
      tableData,
      tableFn,
      detailData,
      detailFn,
    };
  },
};

// 表格功能模块，包括搜索，分页等
function tableModule() {
  const router = useRouter();
  const params = ref({});
  const query = ref({});

  watchEffect(() => {
    console.log(router.currentRoute.value.params);
    params.value = router.currentRoute.value.params;
  });
  watchEffect(() => {
    query.value = router.currentRoute.value.query;
  });
  const backup = {
    query: {
      couponId: "",
      getName: "",
      useStatus: "1",
      pageSize: 10,
      page: 1,
    },
  };

  const $data = reactive({
    query: { ...backup.query },
    list: [],
    total: 0,
    useStatusList: [
      { key: "0", name: "待领取" },
      { key: "1", name: "待使用" },
      { key: "2", name: "已使用" },
      { key: "3", name: "已过期" },
    ],
  });
  const $fn = {
    getTableData() {
      $data.query.couponId = params.value.id;
      getCouponDetailList($data.query).then((res) => {
        if (res.code === 0) {
          $data.list = res.data.items || [];
          $data.total = res.data.pagination.total_record;
        }
      });
    },
    onResetQuery() {
      $data.query = { ...backup.query };
      $fn.getTableData();
    },
    onSubmit() {
      $fn.getTableData();
    },
    goToDetail(row) {
      router.push("/content/detail/" + row.id + "?view=detail");
    },

    getItemFromArray(itemList, item) {
      return getItemFromArray(itemList, item);
    },
  };

  $fn.getTableData();

  return {
    $data,
    $fn,
  };
}

//弹框详情
function detailModule() {
  const $data = reactive({
    showPanel: false,
    type: "",
    data: {},
  });

  const $fn = {
    openPanel(row) {
      $data.type = row.type;
      $data.data = { ...row };
      $data.showPanel = true;
    },
    closePanel() {
      $data.data = {}
      $data.showPanel = false;
    },
  };

  return {
    $data,
    $fn,
  };
}
</script>
  
  <style scoped lang="scss">
@import "@/styles/tablePage.scss";
.the-list {
  height: 100%;
}
.el-form-item {
  margin-bottom: 8px;
}
</style>